{% extends 'admin/common/base.html' %}

{% block title %}
    笔记编辑 - 青灯小站
{% endblock %}

{% block main_title %}
    笔记编辑
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('admin.static', filename='editor/toastui-editor.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('admin.static', filename='editor/prism.min.css') }}">
    <link rel="stylesheet"
          href="{{ url_for('admin.static', filename='editor/toastui-editor-plugin-code-syntax-highlight.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('admin.static', filename='editor/tui-color-picker.min.css') }}">
    <link rel="stylesheet"
          href="{{ url_for('admin.static', filename='editor/toastui-editor-plugin-color-syntax.min.css') }}">
    <script type="text/javascript"
            src="{{ url_for('admin.static', filename='editor/toastui-editor-all.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('admin.static', filename='editor/zh-cn.js') }}"></script>
    <script type="text/javascript"
            src="{{ url_for('admin.static', filename='editor/toastui-editor-plugin-code-syntax-highlight-all.min.js') }}"></script>
    <script type="text/javascript"
            src="{{ url_for('admin.static', filename='editor/tui-color-picker.min.js') }}"></script>
    <script type="text/javascript"
            src="{{ url_for('admin.static', filename='editor/toastui-editor-plugin-color-syntax.min.js') }}"></script>
{% endblock %}

{% block content %}
    <form class="layui-form head_form" lay-filter="filter-test-layer">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md10">
                <input type="text" name="post_title" value="" placeholder="请输入笔记标题" lay-verify="required"
                       lay-reqtext="请输入笔记标题" lay-affix="clear" class="layui-input">
            </div>
            <div class="layui-col-md1">
                <select name="category" lay-filter="category-select-filter">
                    <option value="">选择分类</option>
                    {% for category in category_list %}
                        <option value="{{ category.id }}">{{ category.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="layui-col-md1">
                <div class="header_btn">
                    <button type="button" lay-on="test-page-custom" class="layui-btn layui-bg-blue">发布笔记</button>
                </div>
            </div>
        </div>
    </form>
    <div id="editor"></div>
    <script type="text/html" id="post-template">
        <form class="layui-form" style="margin: 16px;">
            <div class="layui-form-item">
                <label class="layui-form-label">标签(非必填)</label>
                <div class="layui-input-block">
                    {% for tag in tag_list %}
                        <input type="checkbox" name="{{ tag.id }}" title="{{ tag.name }}">
                    {% endfor %}
                </div>
            </div>

            <div style="display: flex;justify-content: flex-end; padding:0 30px 30px 0">
                <button type="button" lay-filter="publish" lay-submit class="layui-btn layui-bg-blue">发布笔记</button>
            </div>
        </form>
    </script>

{% endblock %}

{% block script %}
    <script src="{{ url_for('blog.static', filename='js/activate-power-mode.js') }}"></script>
    <script>
        POWERMODE.colorful = true; // ture 为启用礼花特效
        POWERMODE.shake = false; // false 为禁用震动特效
        document.body.addEventListener('input', POWERMODE);
    </script>
    <script>
        layui.use(() => {
            let $ = layui.$;
            let layer = layui.layer;
            let util = layui.util;
            let form = layui.form;
            let plugin = toastui.Editor.plugin
            let editor = new toastui.Editor({
                el: document.querySelector('#editor'),
                initialEditType: 'markdown',
                previewStyle: 'vertical',
                height: '700px',
                language: 'zh-CN',
                plugins: [plugin.codeSyntaxHighlight, plugin.colorSyntax],
                toolbarItems: [
                    ['heading', 'bold', 'italic', 'strike'],
                    ['hr', 'quote'],
                    ['ul', 'ol', 'task'],
                    ['table'],
                    ['code', 'codeblock'],
                    ['scrollSync'],
                ]
            });

            util.on('lay-on', {
                'test-page-custom': () => {
                    // 判断是否输入了文章标题
                    let title = form.val('filter-test-layer').post_title
                    if (title.trim() === '') {
                        layer.msg('请输入文章标题', {icon: 7, time: 1500, anim: 6});
                        return;
                    }
                    layer.open({
                        type: 1,
                        area: ['600px', ''],
                        resize: false,
                        shadeClose: true,
                        title: '发布笔记',
                        offset: '150px',
                        content: $('#post-template').html(),
                        success: function (layero, index, that) {
                            // 对弹层中的表单进行初始化渲染
                            form.render();
                            form.on('submit(publish)', function (data) {
                                let tags = data.field;
                                let category = form.val('filter-test-layer').category || "{{ category_list[0].id }}";
                                let html = editor.getHTML()
                                let markdown = editor.getMarkdown()

                                let form_data = {
                                    title: title,
                                    category: category,
                                    tags: JSON.stringify(tags),
                                    html: html,
                                    markdown: markdown,
                                }

                                console.log(form_data)

                                $.post('{{ url_for('admin.note_add') }}', form_data, (res) => {
                                        if (res === 'success') {
                                            layer.closeAll(() => {
                                                layer.msg('保存成功', {icon: 1, time: 1500}, () => {
                                                    window.location.href = '{{ url_for('admin.note') }}';
                                                    return false;
                                                });
                                                return false;
                                            });
                                        }
                                        return false;
                                    }
                                )
                            });
                        }
                    })
                }
            })
        })
    </script>
{% endblock script %}